<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>校事达校园即时服务平台</title>
    <link rel="stylesheet" href="./layui2_9/css/layui.css">
</head>

<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">

    <!-- 内容主体区域-->
    <div class="layui-body ">

        <div style="padding: 30px;" class="layui-fluid">
            <div class="layui-row">
                <div class="layui-col-md12">
                    <span class="layui-badge-dot"></span> <span
                        class="layui-badge-dot layui-bg-orange"></span> <span
                        class="layui-badge-dot layui-bg-green"></span> <span
                        class="layui-badge-dot layui-bg-cyan"></span> <span
                        class="layui-badge-dot layui-bg-blue"></span> <span
                        class="layui-badge-dot layui-bg-black"></span> <span
                        class="layui-badge-dot layui-bg-gray"></span>
                    <fieldset class="layui-elem-field layui-field-title"
                              style="margin-top: 30px;">
                        <legend>任务平台</legend>
                    </fieldset>
                </div>
            </div>

            <!--以下是搜索框-->
            <div class="layui-row">
                <div class="layui-col-md1">&nbsp;</div>
                <div class="layui-col-md11">
                    <form class="layui-form layui-form-pane" lay-filter="formFilter" method="post" action="index.html">

                        <div class="layui-form-item">

                            <div class="layui-input-inline">
                                <label class="layui-form-label">学校</label>
                                <div class="layui-input-block" style="width: 250px;">
                                    <input name="" placeholder="输入选择" class="layui-input" id="ID-dropdown-demo-base-input">
                                </div>
                            </div>

                            <div class="layui-inline">
                                <label class="layui-form-label">价格范围</label>
                                <div class="layui-input-inline" style="width: 40px;">
                                    <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
                                </div>
                                <div class="layui-form-mid">-</div>
                                <div class="layui-input-inline" style="width: 40px;">
                                    <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
                                </div>
                            </div>

                            <div class="layui-input-inline">
                                <label class="layui-form-label">任务状态</label>
                                <div class="layui-input-block" style="width: 100px;">
                                    <select id="state" name="price" lay-filter="stateFilter0">
                                        <option value="-1" selected="">请选择</option>
                                        <option value="0">待解决</option>
                                        <option value="1">已关闭</option>
                                        <option value="2">解决中</option>
                                        <option value="3">已完成</option>
                                    </select>
                                </div>
                            </div>

                            <div class="layui-inline">
                                <label class="layui-form-label">关键词</label>
                                <div class="layui-input-block">
                                    <input type="text" name="words" autocomplete="off" class="layui-input" value="">
                                </div>
                            </div>

                            <button class="layui-btn" lay-submit="seform" lay-filter="seform">搜索</button>

                        </div>

                    </form>
                </div>
                <div class="layui-col-md1">&nbsp;</div>
            </div>
            <!--以上是搜索框-->

            <!--以下是时间、价格排序按钮-->
            <div class="layui-row">
                <div class="layui-col-md1">&nbsp;</div>
                <div class="layui-col-md10">
                    <fieldset class="layui-elem-field">
                        <legend>任务</legend>
                        <div class="layui-field-box" style="padding: 30px;">
                            <div class="layui-row">
                                <div class="layui-col-md12">
                                    <div class="fly-panel" style="margin-bottom: 0;">
                                        <div class="fly-panel-title fly-filter">
                                            <a class="layui-this">任务</a>
                                            <span class="fly-mid"></span>
                                            <span class="fly-mid"></span>
                                            <span class="fly-filter-right layui-hide-xs" style="float: right">
                                                <a class="layui-this" style="padding-left: 15px;cursor: pointer">时间最新</a>
                                                <a class="layui-this" style="padding-left: 15px;cursor: pointer"><i class="layui-icon layui-icon-up"></i>价格升序</a>
                                                <a class="layui-this" style="padding-left: 15px;cursor: pointer"><i class="layui-icon layui-icon-down"></i>价格降序</a>
                                            </span>
                                        </div>
                                        <ul class="fly-list">
                                            <li style="padding-left: 15px;cursor: pointer">
                                                    <h2>
                                                        <a class="layui-badge layui-bg-green">华东政法大学</a>
                                                        <a class="layui-badge">待解决</a>
                                                        <br>
                                                        <a onclick="getTask(7)">
                                                            周末垃圾清理
                                                        </a>
                                                    </h2>
                                                    <div class="fly-list-info">
                                                        <a onclick="getPuser(1)" link>
                                                            <cite>小灰</cite>
                                                        </a>
                                                        <span>
                                                            2024-12-18 19:06:37
                                                        </span>
                                                        <span
                                                                class="fly-list-kiss layui-hide-xs"> <i
                                                                class="layui-icon">&#xe65e;</i> 5.0
															</span> <span class="fly-list-nums"> <i
                                                            class="layui-icon">&#xe62c;</i>
															</span>
                                                    </div>
                                                </li>
                                        </ul>
                                    </div>
                                    <div style="text-align: center">
                                            <div id="test1"></div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                    </fieldset>

                </div>
                <div class="layui-col-md1">&nbsp;</div>
            </div>
            <!--以上是时间、价格排序按钮-->

        </div>

    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © - 联系校事达官方客服：6666666
    </div>
</div>
<script src="./layui2_9/layui.js"></script>

<script>
    //JavaScript代码区域
    layui.use('element', function () {
        var element = layui.element;
        // 监听侧边导航栏的点击事件
        element.on('nav(test)', function (elem) {
            var parentLi = elem.closest('li.layui-nav-item');
            var allNavItems = document.querySelectorAll('.layui-nav-tree.layui-nav li.layui-nav-item');

            // 遍历所有导航项
            allNavItems.forEach(function (item) {
                if (item!== parentLi) {
                    // 关闭其他导航项的子菜单
                    var childMenu = item.querySelector('dl.layui-nav-child');
                    if (childMenu) {
                        // 移除 layui-nav-itemed 类以关闭菜单
                        // item.classList.remove('layui-nav-itemed');
                    }
                }
            });

            // 切换当前点击的导航项的展开/关闭状态
            // parentLi.addClass("layui-nav-itemed")
        });
    });
</script>

<script>
    var form;
    layui.use(['layedit', 'form'], function () {
        form = layui.form;

        //自定义验证规则
        form.verify({
            schoolidstr: function (value) {
                if (value.length < 1) {
                    return '学校选择出现问题';
                }
            }
        });

        //监听提交
        form.on('submit(seform)', function (data) {
            /*layer.alert(JSON.stringify(data.field), {
                title : '最终的提交信息'
            })*/
            //return false;
        });

    });
    //加载layui中的jq
    layui.use(['jquery', 'layer'], function () {
        var $ = layui.$, //重点处
            layer = layui.layer;

        $(function () {
            $.post(
                "index.html",
                {},
                function (data) {
                    var obj = JSON.parse(data);
                    var str = "";
                    for (var i = 0; i < obj.length; i++) {
                        var optionStr = "";
                        optionStr += "<option value='" + obj[i].schoolid + "'>" + obj[i].name + "</option>";
                        $("#schoolidstr").append(optionStr);
                        $("#schoolidstr").val(19);
                        form.render('select', 'formFilter');//加载完毕后更新表单显示（统一样式）
                    }
                }
            );
        });
    });
</script>
<script>
    function getPuser(stuid) {
        //iframe层
        layer.open({
            type: 2,
            title: '该用户信息',
            shadeClose: true,
            shade: false,
            area: ['1000px', '600px'],
            content: 'userInfo.html'
        });
    }
    function getTask(tidstr) {
        //iframe层
        layer.open({
            type: 2,
            title: '该任务信息',
            shadeClose: true,
            shade: false,
            area: ['1000px', '600px'],
            content: 'taskInfo.html'
        });
    }
    function showPrivate(value) {
        window.sessionStorage.setItem("username",value);
        //iframe层
        layer.open({
            type: 2,
            title: '即时通信',
            shadeClose: true,
            shade: 0.6, // 遮罩透明度
            shadeClose: true, // 点击遮罩区域，关闭弹层
            area: ['1000px', '600px'],
            content: 'userTalk.html'
        });
    }
</script>
<script>
    layui.use('laypage', function () {
        var laypage = layui.laypage;
        //执行一个laypage实例
        laypage.render({
            elem: 'test1', //注意，这里的 test1 是 ID，不用加 # 号
            count: 100,//数据总数，从服务端得到
            limit: 10,
            curr: 1,
            jump: function (obj, first) {//点击页码出发的事件
                if (first != true) {//是否首次进入页面
                    var currentPage = obj.curr;//获取点击的页码
                    window.location.href = "index.html"
                }
            }
        });
    });
</script>
<script>
    layui.use(function(){
        var dropdown = layui.dropdown;
        // 绑定输入框
        dropdown.render({
            elem: '#ID-dropdown-demo-base-input',
            closeOnClick: false, // 不开启“打开与关闭的自动切换”，即点击输入框时始终为打开状态
            data: [{
                title: '中南大学',
                id: 101
            },{
                title: '湖南大学',
                id: 102
            },{
                title: '长沙大学',
                id: 103
            }],
            click: function(obj){
                this.elem.val(obj.title);
            },
            style: 'min-width: 235px;'
        })
    });
</script>
</body>
</html>
